<!--
 * @Author: panda-hbd 1511539537@qq.com
 * @Date: 2022-11-14 19:29:36
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-15 12:41:35
 * @FilePath: \text-online-system2\src\components\WorkItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="box"  @click="open()">
    <div class="left">
      <div>
        <h4>数据结构 {{isType()}}</h4>
        <div>
          <ul>
            <li>满分：<i>{{courseTestData.score}}</i>分</li>
            <li>|</li>
            <li>共<i>{{courseTestData.questions}}</i>题</li>
            <li>|</li>
            <li>限时：<i>{{courseTestData.duration}}</i>分钟</li>
            <li>|</li>
            <li>截止时间：<i>{{courseTestData.deadTime}}</i></li>
          </ul>
        </div>
        <div class="logo">考试</div>
      </div>
      <div v-if="(typeof(courseTestData.totalScoreOfStudent) != 'undefined')"><p>已完成</p></div>
    </div>
    <div class="right">
      <div v-if="(typeof(courseTestData.totalScoreOfStudent) != 'undefined')">
        <h2>10</h2>
        <span>得分</span>
      </div>
      <div v-else>
        <el-button type="primary">开始作业</el-button>
      </div>
    </div>
  </div>


<!-- 弹窗 -->


  <el-dialog v-model="centerDialogVisible" width="30%" center >
    <div style="display: flex;justify-content: space-around;flex-direction: column;align-items: center;">
      <br>
      <h2>人工智能</h2><br>
      <div style="display: flex;justify-content: space-around;flex-direction: column;align-items: center;background-color: #d3d3d3;width: 100%;">
        <h3>———— 考生须知 ————</h3>
        <br>
        <p>{{courseTestData.instruction}}</p>
        <br>
      </div>
      <br>
      <div style="display: flex;justify-content: space-around;width: 80%;">
        <div style="display: flex;flex-direction: column;align-items: center;">
          <h2>{{courseTestData.score}}</h2>
          <p>试卷总分</p>
        </div>
        <div style="display: flex;flex-direction: column;align-items: center;">
          <h2>{{courseTestData.questions}}</h2>
          <p>总题数</p>
        </div>
      </div>
      <br>
      <p style="color: #067ddf;">开始时间：{{courseTestData.publishTime}}</p>

      <br>
      <p style="color: #067ddf;"> 截止时间：{{courseTestData.deadTime}}</p>

    </div>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">退出</el-button>
        <el-button type="primary" @click="startDoHomework">
          开始考试
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>import paper from '@/api/paper';
import { ElMessage } from 'element-plus'

export default {
  name: "WorkItem",

  data() {
    return {
      centerDialogVisible:false,
      myCurseData:{}
    };
  },
  props:['courseTestData'],

  mounted() {

  },

  methods: {
    isType() {
      if (this.courseTestData.type == 1) {
        return '测试'
      } else {
        return '作业'
      }
    },
    startDoHomework() {
      this.$router.push('/doingTest')
    },
    haveNotification() {
      var nowTime = new Date;
      var endTime = (new Date(this.courseTestData.deadTime));
      console.log();
      if (nowTime > endTime) {
        alert("考试已截止")
      } else {
        this.centerDialogVisible = true;
      }
    },
    open(){
      // var nowTime = new Date;
      // var endTime = (new Date(this.courseTestData.deadTime));
      // console.log();
      // if(nowTime > endTime){
      //   ElMessage('考试已截止')
      // }else{
      this.centerDialogVisible = true;
      // }

    }
  },
  computed:{

    getGradeClass(){

      let paperScore =  this.data.score;
      let stuScore   = this.data.totalScoreOfStudent
      let classIndex =  0
      if( paperScore*0.6 >= stuScore )
        classIndex  =  0
      else if (paperScore*0.9 > stuScore)
        classIndex  =  1
      else
        classIndex = 2

      return this.gradesClass[classIndex]
    }

  }




  };
  </script>

  <style scoped>
  .box {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 16rem 1rem 1rem;
  }
  h4 {
    margin-top: 1rem;
  }
  .left {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-right: 0.125rem solid rgb(197, 195, 195);
    padding: 0 3rem;
  }
  .left ul {
    display: flex;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: rgb(126, 125, 125);
  }
  .left ul li {
    margin: 0 0.2rem;
  }
  .right span {
    font-size: 0.75rem;
    font-weight: 500;
  }
  .logo {
    position: absolute;
    left: 0.6rem;
    top: 0.2rem;
    border: 0.0625rem solid #209de6;
    color: #209de6;
    font-size: 0.75rem;
    padding: 0.1rem;
  }
  </style>
